<template>
  <div id="outletWaterChart" style="height:150px"></div>
</template>
<script>
//接口
// import {
//   findAlarmTrendAnalysis,
// } from "@/api/schedule/gisHydrant/index"
export default {
  name: "outletWaterChart",
  props: {
    outletWaterData: {
      type: Object,
      default: () => { }
    },
  },
  watch: {
    outletWaterData: {
      handler (value) {
        this.initCharts(value);
      },
      deep: true,
    },
  },
  data () {
    return {
      colorList:["#228B22","#CA0303","#E69620","#4169E1"]
    };
  },
  created () {
  },
  mounted () {

  },
  methods: {
    initCharts (val) {
      let pumpList = Object.entries(val.outPressureObj)
      console.log(pumpList)
      let myCharts = this.$echarts.init(document.getElementById('outletWaterChart'));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: val.createDateList,
          axisLabel: {//修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#8DB6DB"
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {//修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#8DB6DB"
            }
          },
        },
        grid: {
          y: 25,
          y2: 30,
        },
        series: []
      };
      // console.log(pumpList)
      // debugger;
      pumpList.map( (item,index) => {
        console.log(item,index)
        if (item[0].search("In") != -1) {
          item[0] = "进出水压力"
        }
        if (item[0].search("Pump1") != -1) {
          item[0] = "1#泵压力"
        }
        if (item[0].search("Pump2") != -1) {
          item[0] = "2#泵压力"
        }
        if (item[0].search("Pump3") != -1) {
          item[0] = "3#泵压力"
        }
        if (item[0].search("Pump4") != -1) {
          item[0] = "4#泵压力"
        }
        if (item[0].search("Pump5") != -1) {
          item[0] = "5#泵压力"
        }
        if (item[0].search("Pump6") != -1) {
          item[0] = "6#泵压力"
        }
        let obj = {
          name: item[0],
          data: item[1],
          type: 'line',
          smooth: true,
          color: this.colorList[index]
        }
        option.series.push(obj)
      })
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option, true);
      window.addEventListener("resize", () => {
        myCharts.resize();
      });
    }
  }
}
</script>
<style>
#energyAnalyChart {
  z-index: 999;
  padding-left: 5px;
}
</style>